<template>
	<div class="view-contain">
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px;">
			<div class="content">
				<div class="logo">
					<div class="img"></div>
				</div>
				<div class="login-form">
		            <div class="codeLogin" v-if="loginType=='code'">
		                <div class="tel">
		                    <input class="telInput" type="tel" value="" ref="phone" placeholder="请输入您的手机号" v-model="phone">
		                </div>
		                <div class="code-row">
		                    <div class="code">
		                        <input class="codeInput" type="text" placeholder="请输入手机验证码" ref="code" v-mode="code">
		                    </div>
		                    <button class="codeBtn" @click="getCode()">
		                        <span v-if='times!=60'>{{times}}</span><span>{{content}}</span>
		                    </button>
		                </div>
		            </div>
		            <div class="pwdLogin" v-if="loginType=='pwd'">
		                <div class="tel">
		                    <input class="telInput" type="tel" v-model="phone" placeholder="请输入您的手机号">
		                </div>
		                <div class="pwd">
		                    <input class="telInput" v-model="pwd" placeholder="请输入您的密码" :type="inputType">
		                    <div class="eye" :class="{'active': inputType=='text'}" @click="showPwd()">
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div class="confirm">
		            <button class="btn" @click="login()" :class="{'active': (loginType=='code'&&verify.telCheck(phone)&&!verify.isNull(code))||(loginType=='pwd'&verify.telCheck(phone)&&!verify.isNull(pwd))}">立即登录</button>
		            <p class="href" v-if="loginType=='code'" @click="toggle('pwd')">
		                <span>密码登录</span>
		                <i class="icon-allow"></i>
		            </p>
		            <p class="href" v-if="loginType=='pwd'" @click="toggle('code')"> 
		                <span>短信验证码登录</span>
		                <i class="icon-allow"></i>
		                <span class="findPwd" @click="$router.push({path:'/fwdPwd'})">忘记密码<i class="icon-allow" style="margin-left:5px"></i></span>
		            </p>
		        </div>
		         <div class="tip">
		            <p>登录或注册即同意 <i @click="$router.push({path: '/registmb'})">《蜜宝平台服务协议》</i></p>
		        </div>
	        </div>
	    </scroll>
	</div>
</template>
<style lang="less" scoped>
	.view-contain {
		position:absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background:#fff;
		& .list-wrapper .scroll-content {
		     background: #ffffff; 
		}
		.content {
			position: relative;
			top: 44px;
			left: 0;
			background: #fff;
			& .logo {
				padding: 56px 0 48px;
				& .img {
					background: url("../../assets/img/comm/logo.png") no-repeat;
					background-size: 100% 100%;
					width: 88px;
					height: 88px;
					margin: 0 auto;
				}
			}
			& .login-form {
				height: 100px;
				width: 303px;
				margin: 0 auto;
				& .codeLogin {
					width: 100%;

				}
				& .pwdLogin {
					width: 100%;
				}
				& .tel {
					position: relative;
				    padding-left: 1.146667rem;
				    border: 1px solid #DADADA;
				    border-radius: .13227rem;
				    overflow: hidden;
				    &:before {
				    	position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: .266667rem;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -97px -52px;
				    }
				}
				& input {
					box-sizing: border-box;
					width: 100%;
				    padding: 6px 0;
				    height: 38px;
				    line-height: 16px;
				    border: none;
				}
				& .code {
					position: relative;
				    padding-left: 1.146667rem;
				    border: 1px solid #DADADA;
				    border-radius: .13227rem;
				    overflow: hidden;
				    float: left;
				    margin-left: 0;
				    width: 183px;
				    box-sizing: border-box;
				    &:before {
			    	    position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: .266667rem;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -9px -7px;
				    }
				}
				& .code-row {
				    margin-top: 17px;
				    overflow: hidden;
				}
				& .codeBtn {
				    float: right;
				    margin-right: 0;
				    width: 104px;
				    border-radius: 5px;
				    line-height: 38px;
				    color: #fff;
				    border: none;
				    background-color: #4C5B72;
				    text-align: center;
				}
			}
			& .confirm {
				position: relative;
			    width: 303px;
			    margin: 0 auto;
			    overflow: hidden;
			    & .icon-allow {
			    	display: inline-block;
			    	background: url('../../assets/img/comm/login_arrow_small@3x.png') no-repeat;
			    	background-size: contain;
			    	width: 7px;
			    	height:11px;
			    	vertical-align: middle;
			    }
			}
			& .btn {
			    margin-top: 36px;
			    width: 100%;
			    border-radius: 5px;
			    height: 39px;
			    line-height: 39px;
			    background-color: #e0e0e0;
			    font-size: 16px;
			    color: #fff;
			    border: none;
			    text-align: center;
			    &.active {
				    background-color: #4C5B72;
				}
			}
			& .href {
			    margin-top: .53333rem;
			    font-size: .2944rem;
			    color: #999;
			    overflow: hidden;
			    text-align: left;
			    .findPwd {
				    float: right;
				    margin-right: 0;
				}
			}
			& .tip {
			    margin-top: 153px;
			    bottom: .8rem;
			    width: 100%;
			    font-size: 11px;
			    color: #999;
			    text-align: center;
			    & i{
				    font-style: normal;
				    color: #00b8fd;
				}
			}
			& .pwd {
				position: relative;
			    padding-left: 1.146667rem;
			    border: 1px solid #DADADA;
			    border-radius: .13227rem;
			    overflow: hidden;
			    margin-top: 17px;
			    padding-right: 1.146667rem;
			    &:before {
			    	position: absolute;
				    content: '';
				    width: 24px;
				    height: 24px;
				    top: 6px;
				    left: .266667rem;
				    background: url('../../assets/img/comm/login-icons.png') no-repeat;
				    background-position: -53px -52px;
				}
				& .eye {
					position: absolute;
				    content: '';
				    width: 24px;
				    height: 24px;
				    top: 6px;
				    background: url('../../assets/img/comm/login-icons.png') 0 0 no-repeat;
				    left: auto;
				    right: 0.266667rem;
				    background-position: -9px -52px;
				    &.active {
					    background-position: -53px -96px;
					}
				}
			}
		}
	}
</style>
<script>
	import apiService from "@/api/homepage.js";
	import verify from "@/utils/verify.js";
	import { cookie } from 'vux';
	import crypto from 'crypto';
	import Toast from '@/components/toast.js';
	export default {
		components: {
        },
        data() {
        	return {
	        	headers: {
	                title:'登录/注册',
	                skip:'',
	            },
	            phone: "",
	            times: 60,
	            content: "获取验证码",
	            flag: false,
	            loginType: "code",
	            verify: verify,
	            code: "",
	            pwd: "",
	            inputType: 'password'
	        }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            getCode() {
            	const _this = this;
            	_this.phone = this.$refs.phone.value;
            	if (_this.phone == '') {
            		Toast("请输入您的手机号码");
                	return false;
            	} else if (verify.telCheck(_this.phone)) {
	            	apiService.getCode(_this.phone).then(resp => {
	            		if(resp.code==200){
            				Toast("验证码已发送");
	                        //倒计时
	                        let interval=setInterval(function () {
	                            _this.times--;
	                            _this.content = "秒";
	                            _this.flag = false;
	                            if (_this.times <= 0) {
	                                _this.content = "获取验证码"
	                                _this.flag = "true";
	                                _this.times = 60;
	                                clearInterval(interval);
	                            }
	                        }, 1000);
	                    }else{
            				Toast(resp.message);
	                    }
	            	})
            	} else {
            		Toast("请输入正确的手机号码");
            	}
        	},
        	toggle(type) {
	            this.loginType=type;
	        },
        	codeLogin() {
        		var _this = this;
        		if (_this.phone == '') {
            		Toast("请输入您的手机号码");
                	return false;
            	} else if (verify.telCheck(_this.phone)) {
	        		const params = {
		                "phone": this.$refs.phone.value,
		                "code": this.$refs.code.value
		            }
	        		apiService.verify(params).then(resp => {
	        			var urlPre = cookie.get('urlPre');
	        			if(resp.code == 200) {
	        				localStorage.setItem('token', resp.data.token);
	        				let isOldUser=resp.data.regist;
	        				if(isOldUser) {
	        					if(urlPre) {
	        						_this.$router.go("home")
	        					} else{
	        						_this.$router.go("home")
	        					}
	        				} else {
	        					_this.$router.go("guide")
	        				}
	        			}
	        		})
	        	} else {
            		Toast("请输入正确的手机号码");
            	}
        	},
        	pwdLogin() {
        		var _this = this;
        		if (_this.phone == '') {
            		Toast("请输入您的手机号码");
                	return false;
            	} else if (verify.telCheck(_this.phone)) {
            		var md5=crypto.createHash('md5');
            		md5.update(this.pwd);
            		var pw = md5.digest('hex');
	        		const params = {
		                "phone": this.phone,
		                "password": pw
		            }
	        		apiService.pwdLogin(params).then(resp => {
	        			var urlPre = cookie.get('urlPre');
	        			if(resp.code == 200) {
	        				localStorage.setItem('token', resp.data.token);
	        				let isOldUser=resp.data.regist;
	        				if(isOldUser) {
	        					if(urlPre) {
	        						//_this.$router.push({path: "/tabs/person"})
	        						_this.$router.push({path: "/guide"})
	        					} else{
	        						_this.$router.push({path: "/tabs/person"})
	        					}
	        				} else {
	        					_this.$router.push({path: "/guide"})
	        				}
	        			} else {
	        				Toast(resp.message);
	        			}
	        		})
	        	} else {
            		Toast("请输入正确的手机号码");
            	}
        	},
        	login(){
        		if(this.loginType=='code') {
	        		this.codeLogin()
	        	} else {
	        		this.pwdLogin()
	        	}
        	},
        	showPwd() {
        		if(this.inputType=='password'){
	                this.inputType = 'text';
	            }else{
	                this.inputType='password';
	            }
        	},
        	pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        }
	}
</script>